<!doctype html>
{% load static%}
<html lang="en">
<head>
    <meta charset="utf-8">
    <title>网站首页</title>
    <link href="{% static 'css/css.css' %}" rel="stylesheet" type="text/css">
    <script src="{% static 'admin/js/jquery.min.js' %}"></script>
    <!-- import CSS -->
    <link rel="stylesheet" href="https://unpkg.com/element-ui/lib/theme-chalk/index.css">

</head>
<body>

{% include 'header.html'%}

<div class="index_wrap" id="app">
    <div class="index_center">

        <!--轮播图-->
        <div id="demo" class="carousel slide" data-ride="carousel" style="background: black">
            <!-- 轮播图片 -->
            <div class="carousel-inner" >
                <div class="carousel-item" style="display: block">
                    <img src="{% static 'images/lunbo/1.png' %}" style="margin: 0 auto;">
                </div>
                <div class="carousel-item" style="display: none">
                    <img src="{% static 'images/lunbo/2.png' %}" style="margin: 0 auto;">
                </div>
                <div class="carousel-item" style="display: none">
                    <img src="{% static 'images/lunbo/3.png' %}" style="margin: 0 auto;">
                </div>
            </div>
        </div>
        <script>
            var n = 0;
            var c=setInterval(function(){
                if(n==2){
                    n=0;
                }else{
                    n++;
                }
                $(".carousel-item").css({"display":"none"});
                $(".carousel-item:eq("+n+")").css({"display":"block"});
            },1500);

        </script>

        <div class="index_santu">
            <img src="{% static 'images/58.png' %}"/>
            <img src="{% static 'images/59.png' %}"/>
            <img src="{% static 'images/60.png' %}" style="margin-right:0px;"/>
        </div>
        <div class="index_title">热门推荐</div>
        <div class="index_two">
            <div class="index_twoleft"><img src="{% static 'images/61.png' %}"/></div>
            <div class="index_tworight">
                <ul>
                </ul>
            </div>
        </div>
        <img src="{% static 'images/68.png' %}" style="padding:20px 0px;"/>
        <div class="index_title">精选商品</div>
        <div class="index_three">

        </div>
        <img src="{% static 'images/75.png' %}" style="padding:20px 0px;"/>
        <div class="index_title">猜你喜欢</div>
        <div class="cai_list">
            <ul>
            </ul>
        </div>
    </div>
    <el-backtop></el-backtop>
</div>


{% include 'footer.html'%}


</body>
<!-- import Vue before Element -->
<script src="https://cdn.jsdelivr.net/npm/vue@2.6.14"></script>
<!-- import JavaScript -->
<script src="https://unpkg.com/element-ui/lib/index.js"></script>
<script>
    new Vue({
        el: '#app',
        data: function() {
            return { visible: false }
        }
    })
</script>
<script>

    loadRecommendGoods()
    loadSelectionGoods()
    loadLikeGoods()

    //进入详情
    function toGoods(id) {
        window.location.href = "/details.html?goods_id=" + id
    }

    //加载热门推荐商品
    function loadRecommendGoods() {
        $(".index_tworight>ul").empty();
        $.get(
            "/getRecommendGoods",
            function (res) {
                if (res.code == 200) {
                    let goodsList = res.data;
                    for (let i = 0; i < goodsList.length; i++) {
                        let goods = goodsList[i];
                        let li = document.createElement("li");
                        li.addEventListener("click", function () {
                            toGoods(goods.id);
                        });
                        let img = document.createElement("img");
                        img.src = goods.goods_img;
                        let p = document.createElement("p");
                        p.innerHTML = goods.goods_title;
                        let div = document.createElement("div");
                        div.className = "index_twojia";
                        let m = document.createElement("m");
                        m.innerHTML = "￥ " + goods.goods_price;
                        let span = document.createElement("span");
                        span.innerHTML = "立即购买"
                        div.append(m)
                        div.append(span)
                        li.append(img)
                        li.append(p)
                        li.append(div)
                        $(".index_tworight>ul").append(li)
                    }
                }
            }
        )
    }

    //加载精选商品
    function loadSelectionGoods() {
        $(".index_three").empty();
        $.get(
            "/getSelectionGoods",
            function (res) {
                if (res.code == 200) {
                    let goodsList = res.data;

                    let index_threeleft = document.createElement("div");
                    index_threeleft.className = "index_threeleft";
                    index_threeleft.addEventListener("click", function () {
                        toGoods(goodsList[0].id)
                    })
                    let shuma_bt = document.createElement("div");
                    shuma_bt.className = "shuma_bt";
                    shuma_bt.innerHTML = goodsList[0].goods_title;
                    index_threeleft.append(shuma_bt)
                    let shuma_jiage = document.createElement("div");
                    shuma_jiage.className = "shuma_jiage";
                    shuma_jiage.innerHTML = "￥ " + goodsList[0].goods_price;
                    index_threeleft.append(shuma_jiage)
                    let img = document.createElement("img");
                    img.src = goodsList[0].goods_img;
                    index_threeleft.append(img)
                    $(".index_three").append(index_threeleft)

                    let index_threemiddle = document.createElement("div");
                    index_threemiddle.className = "index_threemiddle";
                    let ul = document.createElement("ul");
                    for (let i = 1; i < goodsList.length - 1; i++) {
                        let goods = goodsList[i];
                        let li = document.createElement("li");
                        li.addEventListener("click", function () {
                            toGoods(goods.id)
                        })
                        switch (i) {
                            case 2:
                                li.style = "border-right:0px;"
                                break;
                            case 3:
                                li.style = "border-bottom:0px;"
                                break;
                            case 4:
                                li.style = "border-bottom:0px;border-right:0px;"
                                break;
                        }
                        let h2 = document.createElement("h2");
                        h2.innerHTML = goods.goods_title;
                        h2.title = goods.goods_title;
                        li.append(h2)
                        let span = document.createElement("span");
                        span.innerHTML = goods.goods_price;
                        li.append(span);
                        let img = document.createElement("img");
                        img.src = goods.goods_img;
                        li.append(img)
                        ul.append(li);
                    }
                    index_threemiddle.append(ul);
                    $(".index_three").append(index_threemiddle)
                    if(goodsList.length>5){
                        let index_threeright = document.createElement("div");
                        index_threeright.className = "index_threeleft";
                        index_threeright.addEventListener("click", function () {
                            toGoods(goodsList[5].id)
                        })
                        let shuma_bt2 = document.createElement("div");
                        shuma_bt2.className = "shuma_bt";
                        shuma_bt2.innerHTML = goodsList[5].goods_title;
                        index_threeright.append(shuma_bt2)
                        let shuma_jiage2 = document.createElement("div");
                        shuma_jiage2.className = "shuma_jiage";
                        shuma_jiage2.innerHTML = "￥ " + goodsList[5].goods_price;
                        index_threeright.append(shuma_jiage2)
                        let img2 = document.createElement("img");
                        img2.src = goodsList[5].goods_img;
                        index_threeright.append(img2)
                        $(".index_three").append(index_threeright)
                    }

                }
            }
        )
    }

    //加载猜你喜欢商品
    function loadLikeGoods() {
        $(".cai_list > ul").empty();
        $.get(
            "/getLikeGoods",
            function (res) {
                if (res.code = 200) {
                    let goodsList = res.data;
                    for (let i = 0; i < goodsList.length; i++) {
                        let goods = goodsList[i];
                        let li = document.createElement("li");
                        let img = document.createElement("img");
                        img.src = goods.goods_img;
                        let p = document.createElement("p");
                        p.innerHTML = goods.goods_title;
                        p.title = goods.goods_title;
                        let span = document.createElement("span");
                        span.innerHTML = "￥ " + goods.goods_price;
                        li.append(img);
                        li.append(p);
                        li.append(span);
                        $(".cai_list > ul").append(li);
                    }
                }
            }
        )
    }
</script>
</html>
